<template>
  <section class="coin-list">
    <div class="tab-box">
      <tab>
        <tab-item selected @on-item-click="onItemClick">买入</tab-item>
        <tab-item @on-item-click="onItemClick">卖出</tab-item>
        <tab-item @on-item-click="onItemClick">其他</tab-item>
      </tab>
    </div>
    <section class="tab-container">
      <ul class="record-list">
        <li class="list-item" v-for="i in list" :key="i.id">
          <div class="icon-detail">
            <h1>订单号：{{i.orderNum}}</h1>
            <div class="trade-info">
              <div class="trader-info">
                <p>买家ID：{{i.buyerId}}</p>
                <p>卖家ID：{{i.salerId}}</p>
              </div>
              <div class="cion-info">
                <p>交易金额：{{i.tradeMoney}}</p>
                <p>交易数量：{{i.tradeNum}}</p>
                <p>{{i.time}}</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </section>
  </section>
</template>

<script>
  import {Cell, Group, Tab, TabItem} from 'vux'
  export default {
    name: 'NetCoin',
    components: {
      Cell,
      Group,
      Tab,
      TabItem
    },
    data () {
      return {
        list: [
          {id: 1, orderNum: 66654, buyerId: 6666, salerId: 5989, tradeNum: 30, tradeMoney: 20, time: '2018-06-06 12:00'},
          {id: 2, orderNum: 66653, buyerId: 6666, salerId: 5989, tradeNum: 30, tradeMoney: 20, time: '2018-06-06 12:00'},
          {id: 3, orderNum: 66651, buyerId: 6666, salerId: 5989, tradeNum: 30, tradeMoney: 20, time: '2018-06-06 12:00'},
          {id: 4, orderNum: 66652, buyerId: 6666, salerId: 5989, tradeNum: 30, tradeMoney: 20, time: '2018-06-06 12:00'},
          {id: 5, orderNum: 66656, buyerId: 6666, salerId: 5989, tradeNum: 30, tradeMoney: 20, time: '2018-06-06 12:00'}
        ]
      }
    },
    methods: {
      onItemClick (index) {
        console.log(index)
      }
    }
  }
</script>

<style lang="less" scoped>
  .coin-list {
    background-color: #fff;
    .tab-box　{
      position: fixed;
      top: 46px;
      right: 0;
      left: 0;
      z-index: 2;
    }
    .tab-container {
      padding-top: 44px;
    }
    .icon-detail {
      padding: 15px;
      border-bottom: 1px solid #dfdfdf;
      .trade-info {
        display: flex;
        justify-content: space-between;
        .cion-info {
          text-align: right;
        }
      }
    }
  }
</style>
